import React from 'react';
import { useNavigate } from 'react-router-dom';
import { FiUser, FiLogOut, FiChevronRight } from 'react-icons/fi';
import './Setup.css'; // 创建对应的CSS文件
import { NavBar, Space, Toast } from 'antd-mobile'
export default function Setup() {
    const navigate = useNavigate();
    const back=()=>{
        navigate('/my')
    }
    return (
        <div className="settings-container">
            <NavBar onBack={back}>账户设置</NavBar>
            
            <div className="settings-menu">
                {/* 个人信息选项 */}
                <div 
                    className="settings-item"
                    onClick={() => {
                        if(localStorage.getItem('user')){
                            navigate('/xiu')
                        }else{
                            alert('您还未登录,请先去登录')
                            navigate('/login')
                        }
                    }}
                >
                    <div className="item-content">
                        <FiUser className="item-icon" />
                        <span>个人信息</span>
                    </div>
                    <FiChevronRight className="arrow-icon" />
                </div>
                
                {/* 退出登录选项 */}
                <div 
                    className="settings-item logout-item"
                    onClick={() => {
                        if(localStorage.getItem('user')){
                            localStorage.removeItem('user');
                            localStorage.removeItem('username');
                            navigate('/login');
                        }else{
                            alert('您还未登录,请先去登录')
                            navigate('/login')
                        }
                    }}
                >
                    <div className="item-content">
                        <FiLogOut className="item-icon" />
                        <span>退出登录</span>
                    </div>
                    <FiChevronRight className="arrow-icon" />
                </div>
            </div>
        </div>
    );
}